<template>
	<view>
		<view style="background: linear-gradient( 180deg, #FFEEEB 0%, #F8F8FA 100%);height: 310rpx;">
			<u-navbar title=" " placeholder bg-color="transparent" :auto-back="true">
				<view slot="left" class="u-flex">
					<u-icon name="arrow-left" size="19"></u-icon>

				</view>
				<view slot="center" class="u-flex" style="margin-left: -180rpx;">

					<u-search :show-action="false" searchIconColor="#B8BBC3" bgColor="#fff" placeholderColor="#B8BBC3"
						placeholder="请输入商品名称" @search="search" v-model="keyword" style="width: 456rpx;"></u-search>
				</view>
			</u-navbar>


		</view>
		<view class="u-flex" style="justify-content: space-evenly;margin-top: -110rpx;">
			<view @click="changeType(0)"
				style="text-align: center;display: flex;align-items: center;flex-direction: column">
				<image :src="type==0?'../../static/section0ed.png':'../../static/section0.png'"
					style="width: 88rpx;height: 88rpx;"></image>
				<view class="u-m-t-20 u-f-26" :class="type==0?'acted':''">全部</view>
			</view>

			<view @click="changeType(1)"
				style="text-align: center;display: flex;align-items: center;flex-direction: column">
				<image :src="type==1?'../../static/section1ed.png':'../../static/section1.png'"
					style="width: 88rpx;height: 88rpx;"></image>
				<view class="u-m-t-20 u-f-26" :class="type==1?'acted':''">虚拟设备</view>
			</view>
			<view @click="changeType(2)"
				style="text-align: center;display: flex;align-items: center;flex-direction: column">
				<image :src="type==2?'../../static/section2ed.png':'../../static/section2.png'"
					style="width: 88rpx;height: 88rpx;"></image>
				<view class="u-m-t-20 u-f-26" :class="type==2?'acted':''">热卖商品</view>
			</view>
			<view @click="changeType(3)"
				style="text-align: center;display: flex;align-items: center;flex-direction: column">
				<image :src="type==3?'../../static/Group_270ed.png':'../../static/Group_270.png'"
					style="width: 88rpx;height: 88rpx;"></image>
				<view class="u-m-t-20 u-f-26" :class="type==3?'acted':''">俱乐部</view>
			</view>
		</view>
		<u-gap height="20rpx"></u-gap>
		<view class="u-flex">
			<view class="left">
				<view :class="item.id==pid?'act':'none'" v-for="(item,index) in cateList" @click="changePid(item.id)"
					class="u-line-1" :key="index">{{item.name}}</view>
			</view>
			<scroll-view scroll-y class="right" @scrolltolower="loadMore">
				<view class="u-bg-fff ">
					<!-- &&type==0 -->
					<u-scroll-list :indicator="false" v-if="sbList.length>0">
						<view v-for="(item,index) in sbList" :key="index" style="margin: 20rpx 0 0 20rpx;" :class="cate_id==item.id?'subcateact':'subcate'" @click="changesid(item.id)">
							{{item.name}}
						</view>
					</u-scroll-list>
					<view class=" u-flex-y-center u-flex-around" v-show="type != 3">
						<view class="u-bg-fff u-flex-y-center u-flex-around"
							style="width: 690rpx;padding-top: 28rpx;padding-bottom: 28rpx;border-radius: 10%;">
							<view class="u-flex-y-center" :class="status==0?'tabAct':'tab'" @click="clickTab(0)">
								<view>最新</view>

							</view>
							<view class="u-flex-y-center" :class="status==1||status==2?'tabAct':'tab'"
								@click="clickTab(1)">
								<view>销量</view>
								<view class="u-flex u-m-l-6" style="flex-direction: column">
									<image :src="status==1?'../../static/uped.png':'../../static/up.png'"
										style="width: 13.84rpx;height: 9.4rpx;"></image>
									<image :src="status==2?'../../static/downed.png':'../../static/down.png'"
										style="width: 13.84rpx;height: 9.4rpx;margin-top: 2rpx;"></image>
								</view>
							</view>
							<view class="u-flex-y-center" :class="status==3||status==4?'tabAct':'tab'"
								@click="clickTab(3)">
								<view>价格</view>
								<view class="u-flex u-m-l-6" style="flex-direction: column">
									<image :src="status==3?'../../static/uped.png':'../../static/up.png'"
										style="width: 13.84rpx;height: 9.4rpx;"></image>
									<image :src="status==4?'../../static/downed.png':'../../static/down.png'"
										style="width: 13.84rpx;height: 9.4rpx;margin-top: 2rpx;"></image>
								</view>
							</view>
						</view>
					</view>

					<u-gap height="20rpx"></u-gap>
					<view class="u-p-30 u-flex " v-for="(item,index) in list"
						@click="toDetail(item.id)" :key="index" v-if="type!=3">
						<image :src="item.image || item.cover_image" style="width: 176rpx;height: 176rpx;"></image>
						<view class="u-m-l-20"
							style="border-bottom: 1rpx solid #ECECEC;padding-bottom: 30rpx;width: 64%;">
							<view class="u-f-28 u-bold">{{item.name || item.cover_image}}</view>
							<view class="u-m-t-20  u-flex-y-center" v-if="type!= 1">
								<view class="u-flex-y-center"
									style="padding: 7rpx 12rpx;background: rgba(234,77,68,0.1);">
									<image src="../../static/xin.png" style="width: 24rpx;height: 24rpx;"></image>
									<view class="u-f-26 u-m-l-6" style="color: #EA4D44;">{{item.star||0}}分</view>
								</view>
								<view class="u-m-l-20 u-f-26" style="color: #1D2541;">近期服务{{item.sold||0}}人</view>
							</view>
							<view class="u-flex u-flex-between u-m-t-16" style="align-items: baseline;">
								<view class="u-flex " style="color: #EA4D44;align-items: baseline;">
									<block v-if="item.score > 0">
										<view class="u-f-28 u-bold">{{item.score}}</view>
										<view class="u-f-22">积分</view>
										<view class="u-f-22">+</view>
									</block>
									<view class="u-f-28 u-bold" v-if="type!= 1">{{item.price}}</view>
									<view class="u-f-28 u-bold" v-else>{{item.selling_price}}</view>
									<view class="u-f-22">元</view>
								</view>
								<image src="../../static/gu.png" style="width: 46rpx;height: 46rpx;"
									@click.stop="valChange(item.id,index,1)" v-if="item.number==0"></image>
								<view class="u-flex-y-center" v-if="item.number>0">
									<image src="../../static/jian.png"
										style="width: 46rpx;height: 46rpx;margin-right: 16rpx;"
										@click.stop="valChange(item.id,index,0)"></image>
									<view class="u-f-26">{{item.number||0}}</view>
									<image src="../../static/jia.png"
										style="width: 46rpx;height: 46rpx;margin-left: 16rpx;"
										@click.stop="valChange(item.id,index,1)"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="u-p-16 u-flex u-bg-fff" style="border-radius: 20rpx;margin-bottom: 30rpx;"
						v-for="(item,index) in list" :key="index" @click="$u.route('/pages/shop/store?id='+item.id)" v-if="type==3">
						<view class="u-flex-y-center">
							<image :src="item.image" style="width: 176rpx;height: 176rpx;border-radius: 20rpx;"></image>
							<view style="margin-left: 20rpx;">
								<view class="u-f-28 u-bold">{{item.name}}</view>
								<u-gap height="20rpx"></u-gap>
								<view class="u-flex-y-center">
									<view class="u-flex-y-center"
										style="padding: 7rpx 12rpx;background: rgba(234,77,68,0.1);border-radius: 20rpx 20rpx 20rpx 20rpx;">
										<image src="/static/xin.png"
											style="width: 24rpx;height: 24rpx;margin-right: 6rpx;"></image>
										<view style="color: #EA4D44;" class="u-f-26 u-bold">{{item.star||0}}</view>
									</view>
									<view style="margin-left: 20rpx;font-size: 26rpx;">
										近期服务{{item.sold||0}}人
									</view>
								</view>
								<u-gap height="27rpx"></u-gap>
								<view class="u-f-26 ">进入店铺 ></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	
		<view class="addcarbox" @click.stop="tocar()" >
			<image src="../../static/gu.png"/>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				user: {},

				list: [],
				page: 1,
				status: 0,
				type: 0,
				keyword: '',
				list1: [{
					name: '最新',
				}, {
					name: '销量',
				}, {
					name: '价格',
				}],
				cateList: [],
				cate_id: 0,
				pid: 0,
				sbList: [],
				isLastPage: false,
			}
		},
		onLoad() {

			this.page = 1
			this.list = []
			this.getList()
			this.getCate()
		},
		onReachBottom() {
			console.log(this.isLastPage)
			if (this.isLastPage === true) return
			this.page++
			this.getList()
		},
		methods: {
			tocar(){
				uni.switchTab({
					url: "/pages/cart/cart"
				})
			},
			toDetail(id){
				if (this.type !== 1) {
					this.$u.route('/pages/shop/scoreDetail?id='+id)
				} else {
					this.$u.route('/pages/shop/zbDetail?id='+id)
				}
			},
			loadMore() {
				if (this.isLastPage === true) return
				this.getList()
			},
			changePid(e) {
				if(this.type == 1||this.type == 3) return
				this.pid = e
				this.cate_id = e
				this.getCate(e)
				this.list = []
				this.page = 1
				this.getList()
			},
			changesid(e) {
				this.cate_id = e
				this.list = []
				this.page = 1
				this.getList()
			},
			clickTab(e) {
				if (e == 1) {
					e = this.status == 1 ? 2 : 1
				}
				if (e == 3) {
					e = this.status == 3 ? 4 : 3
				}
				this.status = e
				this.list = []
				this.page = 1
				this.getList()
			},
			search(e) {
				this.list = []
				this.page = 1
				this.getList()
			},
			changeType(e) {
				this.sbList = []
				this.cate_id = 0

				this.type = e
				this.getCate()
				this.list = []
				this.page = 1
				this.getList()
			},
			async getCate(pid) {
				
				let res = this.type !== 1 ? await uni.$u.http.post('shop/cateList', {
					section_id: this.type,
					project_id: uni.getStorageSync('project_id'),
					pid: pid
				}) :await uni.$u.http.post('virtual_equipments/getCategoryList');
				if (this.type == 1) {
					this.sbList = res
					return
				}
				this.pid = pid
				if (pid) {
					this.sbList = res
				} else {
					this.cateList = res
				}

			},

			async valChange(id, e, t) {
				const flag = getApp().checkLogin(true)
				if (!flag) return
				let info = this.list[e]
				let num = t == 0 ? --info.number : ++info.number
				let res = await uni.$u.http.post('shop/cartAdd', {
					shop_id: id,
					number: num
				});
				this.list[e].number = num
			},
			async getList() {
				if (this.page == -1) {
					return
				}
				let params = {
					page: this.page,
					keyword: this.keyword,
					sort: this.status,
					section_id: this.type,
					cate_id: this.cate_id,
					project_id: uni.getStorageSync('project_id'),
					is_score: 0
				}
				let url;
				if (this.type == 3) {
					url = 'shop/agentList'
					params = {
						
					}
				} else if(this.type == 1) {
					url = 'virtual_equipments/getList'
					params = {
						page: this.page,
						keyword: this.keyword,
						sort: this.status,
						team: '',
						category_id: this.cate_id,
						site_project_id: uni.getStorageSync('project_id'),
						is_recommended: 0,
					}
				} else {
					url = 'shop/shopList'
				}
				let res = await uni.$u.http.post(url, params);
				this.list = this.page == 1 ? res.data : [].concat(this.list, res.data)
				
				console.log(res.last_page === res.current_page)
				this.isLastPage = res.last_page === res.current_page
			},
		}
	}
</script>

<style scoped lang="scss">
	.addcarbox {
		position: fixed;
		right: 20rpx;
		bottom: 200rpx;
		z-index: 100;
		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}
	page {
		background: #F8F8FA;
	}

	.tab {
		font-size: 28rpx;
		color: #141936;
	}

	.tabAct {
		font-size: 28rpx;
		font-weight: 400;
		color: #EA4D44;
		position: relative;

	}

	.left {

		width: 160rpx;
		height: calc(100vh - 320rpx);
		background-color: #f4f4f4;
		overflow: auto;
	}

	.right {
		width: 590rpx;
		flex: 1;
		height: calc(100vh - 320rpx);
		background-color: #fff;

		/* padding-top: 30rpx; */
	}

	.none {
		width: 100%;
		line-height: 96rpx;
		height: 96rpx;
		color: #333333;
		font-size: 28rpx;
		padding: 0 5rpx;
	}

	.act {
		width: 100%;
		line-height: 96rpx;
		height: 96rpx;
		color: #EA4D44;
		background-color: #fff;
		font-size: 28rpx;
		padding: 0 10rpx;


	}

	.acted {
		background: linear-gradient(135deg, #F69792 0%, #EA4D44 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 1rpx 10rpx;
		color: #FFFFFF;
	}

	.subcateact {
		background: rgba(234, 77, 68, 0.1);
		border-radius: 24rpx;
		color: #EA4D44;
		font-size: 28rpx;
		width: fit-content;
		padding: 0 20rpx;
		margin-right: 8rpx;
		text-align: center;
		word-break: keep-all;
		
	}

	.subcate {
		background: #F8F8FA;
		border-radius: 24rpx;
		color: #141936;
		font-size: 28rpx;
		width: fit-content;
		padding: 0 20rpx;
		margin-right: 8rpx;
		text-align: center;
		word-break: keep-all;
	}
</style>
